<template>
  <div>
    <el-divider content-position="left">报价流程</el-divider> 
    <el-card>
        <div class="box">
            <el-steps :active="applicationCenterStore.active" align-center finish-status="success">
                <el-step v-for="(item, index) in opList" :title="item.label" :icon="item.icon" :description="applicationCenterStore.active===index ? '进行中' : (applicationCenterStore.active>index ? '已完成' : '')" ></el-step>
            </el-steps>
        </div>
    </el-card>
    <el-card style="margin-top: 20px;">
        <createOrder v-if="applicationCenterStore.active===0"/>
        <design v-if="applicationCenterStore.active===1" />
        <purchase v-if="applicationCenterStore.active===2" />
        <salesPrinting v-if="applicationCenterStore.active===3" />
    </el-card>
  </div>
</template>
<script setup lang="ts">
import design from './component/design.vue'
import createOrder from './component/createOrder.vue'
import purchase from './component/purchase.vue'
import salesPrinting from './component/salesPrinting.vue'
import useApplicationCenterStore from '@/store/modules/applicationCenter'

let applicationCenterStore = useApplicationCenterStore()
const opList = [
    {label: '销售建单', icon: 'Tickets'},
    {label: '设计', icon: 'Monitor'},
    {label: '采购', icon: 'ShoppingTrolley'},
    {label: '销售打印', icon: 'Document'},
]
</script>
<style scoped lang="scss">
.box {
    // display: flex;
    // justify-content: space-around;
    // align-items: center;
}
.tips {
    width: 100%;
    height: 200px;
    font-size: 20px;
    color: red;
    text-align: center;
    line-height: 200px;
}
.enter {
    width: 19%;
    height: 100px;
    color: #fff;
    font-size: 25px;
    text-align: center;
    line-height: 100px;
    border-radius: 8px;
    cursor: pointer;
    background-image: url('https://img2.baidu.com/it/u=4025974232,4229548935&fm=253&fmt=auto&app=138&f=JPEG');
    background-repeat: no-repeat;
}
</style>
